<script setup lang="ts">
import { ref, computed } from 'vue'
import type { PropType } from 'vue'
import { VxeTable, VxeColumn } from 'vxe-table'
interface ITableColumn {
  columns: any[]
  showSeq?: boolean
  tableConfig?: any
}
const props = defineProps({
  data: {
    type: Object as PropType<ITableColumn>,
    default: () => ({
      columns: [],
      tableConfig: {
        showSeq: true, // 是否显示序号
        data: [],
      },
    }),
  },
  maxHeight: {
    type: [Number, String],
    default: '100%',
  },
  tableHandler: {
    type: Object,
    default: () => {
      return {
        'cell-click': function () {}
      }
    }
  }
})
const tableConfig = computed(() => {
  return {
    id: new Date().toDateString(),

    // round: true,
    autoResize: false,
    showOverflow: true,
    'column-config': {
      minWidth: 120,
    },
    ...props?.data?.tableConfig,
  }
})
</script>

<template>
  <VxeTable
    v-bind="tableConfig"
    v-on="tableHandler"
    size="medium"
    border="none"
    :column-config="{ useKey: true }"
    :max-height="maxHeight"
  >
    <VxeColumn type="seq" v-if="data?.showSeq">
      <template #default="{ $rowIndex }">
        {{ $rowIndex + 1 }}
      </template>
    </VxeColumn>
    <template v-for="(column, index) in data?.columns" :key="index">
      <VxeColumn
        :field="column.field"
        :title="column.title"
        :type="column?.type"
        :min-width="column.minWidth"
        :width="column.width"
        :use-key="column.useKey || true"
      >
        <template #default="{ row }" v-if="column.slot">
          {{ row[column.field] }}&emsp;
          <img
            v-if="row.direction === 'top'"
            src="@/assets/images/red-arrow-top.png"
            alt=""
            class="w-14px"
          />
          <img
            v-if="row.direction === 'bottom'"
            class="w-14px"
            src="@/assets/images/green-arrow-bottom.png"
            alt=""
          />
          <span v-else-if="row.direction === '-'">-</span>
        </template>
      </VxeColumn>
    </template>
  </VxeTable>
</template>

<style lang="scss" scoped>
:deep(.small) {
  font-size: 12px;
}
</style>
